<template>
<el-card shadow="hover">
  <el-form label-width="120px">
    <el-form-item label="用户编号">
      <el-input :value="userInfoForm.userCode" readonly></el-input>
    </el-form-item>
    <el-form-item label="用户名称">
      <el-input :value="userInfoForm.userName" readonly></el-input>
    </el-form-item>
    <el-form-item label="部门编号">
      <el-input :value="userInfoForm.departmentCode" readonly></el-input>
    </el-form-item>
    <el-form-item label="部门名称">
      <el-input :value="userInfoForm.departmentName" readonly></el-input>
    </el-form-item>
    <el-form-item label="角色编号">
      <el-input :value="userInfoForm.roleCodes" readonly></el-input>
    </el-form-item>
    <el-form-item label="角色名称">
      <el-input :value="userInfoForm.roleNames" readonly></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="userModifyPasswordFormDialogVisible = true">修改密码</el-button>
    </el-form-item>
  </el-form>
  <el-dialog title="修改密码" :visible.sync="userModifyPasswordFormDialogVisible"
             @closed="userModifyPasswordFormDialogClosed">
    <el-form :model="userModifyPasswordForm" :rules="userModifyPasswordFormRules" ref="userModifyPasswordForm"
             label-width="120px">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input type="password" v-model="userModifyPasswordForm.oldPassword" autocomplete="new-password"
                  show-password clearable></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="userModifyPasswordForm.newPassword" autocomplete="new-password"
                  show-password clearable></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmNewpassword">
        <el-input type="password" v-model="userModifyPasswordForm.confirmNewpassword" autocomplete="new-password"
                  show-password clearable></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="userModifyPasswordFormDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="userModifyPasswordFormSubmit">确 定</el-button>
    </div>
  </el-dialog>
</el-card>
</template>

<style lang="scss">

</style>

<script>
export default {
  data () {
    let validateConfirmNewpassword = (rule, value, callback) => {
      if (value !== this.userModifyPasswordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      userInfoForm: {
        userCode: '',
        userName: '',
        departmentCode: '',
        departmentName: '',
        roleCodes: '',
        roleNames: ''
      },
      userModifyPasswordFormDialogVisible: false,
      userModifyPasswordForm: {
        oldPassword: '',
        newPassword: '',
        confirmNewpassword: ''
      },
      userModifyPasswordFormRules: {
        oldPassword: [
          {required: true, message: `请输入旧密码`, trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: `请输入新密码`, trigger: 'blur'}
        ],
        confirmNewpassword: [
          {required: true, message: `请再次输入新密码`, trigger: 'blur'},
          {validator: validateConfirmNewpassword, trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.$http({
      url: '/cardone/v1/usercenter/user/info.json',
      method: 'post'
    }).then(response => {
      this.userInfoForm = response.data
    })
  },
  methods: {
    userModifyPasswordFormDialogClosed () {
      this.$refs.userModifyPasswordForm.resetFields()
    },
    userModifyPasswordFormSubmit () {
      this.$refs.userModifyPasswordForm.validate((valid) => {
        if (!valid) {
          return
        }

        this.$http({
          url: '/cardone/v1/usercenter/user/m0003.json',
          method: 'post',
          data: this.userModifyPasswordForm
        }).then(response => {
          this.$message({
            type: 'info',
            message: '密码已修改成功'
          })

          this.userModifyPasswordFormDialogVisible = false
        })
      })
    }
  }
}
</script>
